<template>
  <div id="st_home">
    <div class="logo_header">
      <LogoHeader />
    </div>
    <div class="infos_header">
      <InfosHeader />
    </div>

    <div id="check_header">
      <div class="header_co">
        <CoHeader />
      </div>
    </div>

    <div class="sort">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1"> 我的作业 </el-menu-item>
        <el-menu-item index="2">
          <router-link to="/material">
            <span @click="sendType(1)">学习资料</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/material">
            <span @click="sendType(2)">课外读物</span>
          </router-link>
        </el-menu-item>
      </el-menu>
    </div>

    <div id="main">
      <el-tabs v-model="activeName" type="card" class="sort_list">
        <el-tab-pane label="全部" name="first">
          <div v-if="tableData[0].ho_id">
            <el-table
              class="main_type"
              :data="tableData"
              height="440"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
            >
              <el-table-column label="序号" width="250">
                <template slot-scope="scope">
                  <span>{{
                    (pages.page - 1) * pages.size + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ho_name"
                label="题目"
                width="150"
                class="content"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.ho_name"
                    placement="top"
                  >
                    <span>{{ scope.row.ho_name }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                label="截止时间"
                width="300"
                sortable
                :sort-method="sortByTimeDate"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.ho_end_time | formatTimeDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ho_submit"
                label="完成情况"
                sortable
                width="150"
                :sort-method="sortBySumbitDate"
              >
              </el-table-column>
              <el-table-column label="操作" width="230">
                <template slot-scope="scope">
                  <el-button
                    @click="
                      open(
                        scope.row.ho_id,
                        scope.row.ho_type,
                        scope.row.ho_end_time
                      )
                    "
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else>
            <el-empty description="没有任何作业！"></el-empty>
          </div>
        </el-tab-pane>
        <el-tab-pane label="测试" name="second">
          <div v-if="tableTestData[0].ho_id">
            <el-table
              class="main_type"
              :data="tableTestData"
              height="440"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
            >
              <el-table-column label="序号" width="250">
                <template slot-scope="scope">
                  <span>{{
                    (pages.page - 1) * pages.size + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ho_name"
                label="题目"
                width="150"
                class="content"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.ho_name"
                    placement="top"
                  >
                    <span>{{ scope.row.ho_name }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                label="截止时间"
                width="300"
                sortable
                :sort-method="sortByTimeDate"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.ho_end_time | formatTimeDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ho_submit"
                label="完成情况"
                sortable
                width="150"
                :sort-method="sortBySumbitDate"
              >
              </el-table-column>
              <el-table-column label="操作" width="230">
                <template slot-scope="scope">
                  <el-button
                    @click="
                      open(
                        scope.row.ho_id,
                        scope.row.ho_type,
                        scope.row.ho_end_time
                      )
                    "
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else>
            <el-empty description="没有任何测试作业！"></el-empty>
          </div>
        </el-tab-pane>
        <el-tab-pane label="诗词" name="fourth">
          <div v-if="tablePoetryData[0].ho_id">
            <el-table
              class="main_type"
              :data="tablePoetryData"
              height="440"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
            >
              <el-table-column label="序号" width="250">
                <template slot-scope="scope">
                  <span>{{
                    (pages.page - 1) * pages.size + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ho_name"
                label="题目"
                width="150"
                class="content"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.ho_name"
                    placement="top"
                  >
                    <span>{{ scope.row.ho_name }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                label="截止时间"
                width="300"
                sortable
                :sort-method="sortByTimeDate"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.ho_end_time | formatTimeDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ho_submit"
                label="完成情况"
                sortable
                width="150"
                :sort-method="sortBySumbitDate"
              >
              </el-table-column>
              <el-table-column label="操作" width="230">
                <template slot-scope="scope">
                  <el-button
                    @click="
                      open(
                        scope.row.ho_id,
                        scope.row.ho_type,
                        scope.row.ho_end_time
                      )
                    "
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else>
            <el-empty description="没有任何诗词作业！"></el-empty>
          </div>
        </el-tab-pane>
        <el-tab-pane label="背诵" name="five">
          <div v-if="tableReciteData[0].ho_id">
            <el-table
              class="main_type"
              :data="tableReciteData"
              height="440"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
            >
              <el-table-column label="序号" width="250">
                <template slot-scope="scope">
                  <span>{{
                    (pages.page - 1) * pages.size + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ho_name"
                label="题目"
                width="150"
                class="content"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.ho_name"
                    placement="top"
                  >
                    <span>{{ scope.row.ho_name }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                label="截止时间"
                width="300"
                sortable
                :sort-method="sortByTimeDate"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.ho_end_time | formatTimeDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ho_submit"
                label="完成情况"
                sortable
                width="150"
                :sort-method="sortBySumbitDate"
              >
              </el-table-column>
              <el-table-column label="操作" width="230">
                <template slot-scope="scope">
                  <el-button
                    @click="
                      open(
                        scope.row.ho_id,
                        scope.row.ho_type,
                        scope.row.ho_end_time
                      )
                    "
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else>
            <el-empty description="没有任何背诵作业！"></el-empty>
          </div>
        </el-tab-pane>
        <el-tab-pane label="作文" name="third">
          <div v-if="tableCompositionData[0].ho_id">
            <el-table
              class="main_type"
              :data="tableCompositionData"
              height="440"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
            >
              <el-table-column label="序号" width="250">
                <template slot-scope="scope">
                  <span>{{
                    (pages.page - 1) * pages.size + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ho_name"
                label="题目"
                width="150"
                class="content"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.ho_name"
                    placement="top"
                  >
                    <span>{{ scope.row.ho_name }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>

              <el-table-column
                label="截止时间"
                width="300"
                sortable
                :sort-method="sortByTimeDate"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.ho_end_time | formatTimeDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ho_submit"
                label="完成情况"
                sortable
                width="150"
                :sort-method="sortBySumbitDate"
              >
              </el-table-column>
              <el-table-column label="操作" width="230">
                <template slot-scope="scope">
                  <el-button
                    @click="
                      open(
                        scope.row.ho_id,
                        scope.row.ho_type,
                        scope.row.ho_end_time
                      )
                    "
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else>
            <el-empty description="没有任何作文作业！" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { formatDate } from "../common/common";
import LogoHeader from "../components/logo.vue";
import InfosHeader from "../components/infos_header.vue";
import CoHeader from "../components/co_header.vue";
export default {
  name: "st_home",
  components: {
    LogoHeader,
    InfosHeader,
    CoHeader,
  },
  data() {
    return {
      index: 0,
      activeIndex: "1",
      activeName: "first",
      pages: {
        page: 1,
        size: 10,
        total: 100,
      },
      tableData: [{}],
      tableTestData: [{}],
      tableCompositionData: [{}],
      tablePoetryData: [{}],
      tableReciteData: [{}],
      tableSubmittedData: [{}],
      tableUnCommittedData: [{}],
    };
  },
  methods: {
    loadHomeworkData() {
      let i,
        j,
        test = 0,
        composition = 0,
        poetry = 0,
        recite = 0;
      this.axios
        .get(
          "http://10.197.43.62:8088/student/allhomework_cl?cl_id=" +
            this.cl_id +
            "&st_id=" +
            this.st_id
        )
        .then((res) => {
          var tlist = [].concat(res.data);
          for (i = 0; i < tlist.length; i++) {
            tlist[i].ho_submit = "未提交";
          }
          console.log(tlist);
          this.axios
            .get("http://10.197.43.62:8088/student/stgrade?st_id=" + this.st_id)
            .then((res) => {
              this.tableData = tlist;
              for (j = 0; j < res.data.length; j++) {
                for (i = 0; i < this.tableData.length; i++) {
                  if (res.data[j].ho_id == this.tableData[i].ho_id) {
                    if (res.data[j].ho_submit == 1) {
                      if (
                        res.data[j].st_ho_grade ||
                        res.data[j].st_ho_grade == 0
                      ) {
                        this.tableData[i].ho_submit = res.data[j].st_ho_grade;
                      } else {
                        this.tableData[i].ho_submit = "已提交";
                      }
                    }
                  }
                }
              }

              for (i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].ho_type == "1") {
                  this.tableCompositionData[composition] = this.tableData[i];
                  composition++;
                }
                if (this.tableData[i].ho_type == "2") {
                  if (this.tableData[i].ho_submit == -1) {
                    this.tableData[i].ho_submit = "不及格";
                  } else if (this.tableData[i].ho_submit == 100) {
                    this.tableData[i].ho_submit = "及格";
                  }
                  this.tableReciteData[recite] = this.tableData[i];
                  recite++;
                }
                if (this.tableData[i].ho_type == "3") {
                  this.tableTestData[test] = this.tableData[i];
                  test++;
                }
                if (this.tableData[i].ho_type == "4") {
                  this.tablePoetryData[poetry] = this.tableData[i];
                  poetry++;
                }
              }
            });
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    sortByTimeDate(obj1, obj2) {
      let date1 = new Date(obj1.ho_end_time);
      let date2 = new Date(obj2.ho_end_time);
      date1 = formatDate(date1, "yyyyMMdd");
      date2 = formatDate(date2, "yyyyMMdd");
      return date1 - date2;
    },
    sortBySumbitDate(obj1, obj2) {
      let date1 = obj1.ho_submit,
        date2 = obj2.ho_submit;
      let val1 = date1 == "未提交" ? 0 : 1;
      let val2 = date2 == "未提交" ? 0 : 1;
      if (val1 > val2) {
        return -1;
      } else {
        return 1;
      }
    },

    open(ho_id, ho_type, ho_end_time) {
      var hoData = new Date(ho_end_time);
      var nowData = new Date();
      var ho_deadline = nowData.getTime() > hoData.getTime() ? 0 : 1;
      localStorage.setItem("ho_deadline", ho_deadline);
      this.$store.dispatch("SET_HO_TIME", ho_deadline);
      this.axios
        .get(
          "http://10.197.43.62:8088/student/tianjiaxueshen?ho_id=" +
            ho_id +
            "&cl_id=" +
            this.cl_id +
            "&st_id=" +
            this.st_id
        )
        .then(() => {
          localStorage.setItem("ho_id", ho_id);
          this.$store.dispatch("SET_HO_ID", ho_id);
          if (ho_type == 1 || ho_type == 2) {
            this.$router.push("/detail_file");
          }
          if (ho_type == 3) {
            this.$router.push("/detail");
          }
          if (ho_type == 4) {
            this.$router.push("/detail_poetry");
          }
        });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    sendType(ma_type) {
      localStorage.setItem("ma_type", ma_type);
      this.$store.dispatch("SET_MA_TYPE", ma_type);
      console.log(ma_type);
    },
  },
  filters: {
    formatTimeDate(val) {
      let date = new Date(val);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  mounted() {
    this.loadHomeworkData();
  },
  computed: {
    cl_id() {
      return this.$store.state.cl_id;
    },
    st_id() {
      return this.$store.state.st_id;
    },
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  list-style: none;
  color: #000;
}

#st_home {
  z-index: -1;
  width: 100%;
  background-image: url(../assets/img/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  min-height: 100vh;
  position: absolute;
}

/*check_header  */
#check_header {
  padding: 10px 300px 20px;
}

h1 {
  text-align: center;
  line-height: 40px;
  height: 40px;
  width: 300px;
  margin: 0 auto;
  font-size: 25px;
}

.header_infos {
  float: right;
}

/*  */
.sort {
  margin-top: 20px;
  padding-left: 30px;
  width: 100%;
  background-color: #fff;
}

/*  */
.main {
  padding: 40px;
  display: flex;
  justify-content: center;
}

.sort_list {
  margin: 10px 300px;
  background-color: #fff;
}

.main_type {
  font-size: 20px;
}
</style>
<style>
/* 分类 */
#st_home .el-submenu,
.el-menu-item {
  width: 30%;
}

#st_home .el-menu--horizontal > .el-menu-item,
.el-submenu__title {
  color: #000;
  font-size: 20px;
  text-align: center;
}

#st_home .el-menu {
  width: 60%;
  margin: auto;
}

/* 作业 */

#st_home .el-tabs--border-card > .el-tabs__content {
  padding: 0;
}

#st_home .el-tabs__nav {
  width: 100%;
}

/* 标签页表头 */
#st_home .el-tabs__item {
  font-size: 25px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  width: 20%;
}

/* 表头 */
#st_home .el-table th.el-table__cell > .cell {
  line-height: 35px;
  text-align: center;
}

#st_home .cell {
  line-height: 70px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#st_home .el-table {
  margin: 0;
  padding: 0;
}

#st_home .main_type .el-button {
  font-size: 20px;
}

#st_home .el-empty {
  height: 450px;
  background-color: #fff;
}

#st_home .el-tabs__header {
  margin: 0;
}
</style>